import React, { PureComponent } from 'react'

function withRenderTime(WrapperComponent) {
  return class extends PureComponent {
    // 即将渲染时间 beginTime
    UNSAFE_componentWillMount() {
      this.beginTime = Date.now()
    }

    // 渲染完成的时间 endTime
    componentDidMount() {
      this.endTime = Date.now()
      const interval = this.endTime - this.beginTime
      console.log(`${WrapperComponent.name}渲染时间: ${interval}`)
    }

    render() {
      return <WrapperComponent/>
    }
  }
}

class Home extends PureComponent {
  render() {
    return (
      <h2>Home</h2>
    )
  }
}

class About extends PureComponent {
  render() {
    return (
      <h2>About</h2>
    )
  }
}

const RenderTimeHome = withRenderTime(Home)
const RenderTimeAbout = withRenderTime(About)

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <RenderTimeHome/>
        <RenderTimeAbout/>
      </div>
    )
  }
}
